﻿@model IList<ProductSpecificationModel>
<div class="spec-container table-responsive">
    @{
        var group = Model.GroupBy(x => x.SpecificationAttributeName);
    }
    <table class="table data-table border-bottom-0">
        <colgroup>
            <col />
            <col />
        </colgroup>
        <tbody>
            @foreach (var item in group)
            {
                <tr class="spec">
                    <td class="border-bottom border-top-0">
                        <div class="spec-name">
                            @{
                                var groupList = item.ToList();
                            }
                            @groupList[0].SpecificationAttributeName:
                        </div>
                    </td>
                    <td class="border-bottom border-top-0">
                        @{
                            var groupList2 = item.ToList();
                        }
                        <div class="spec-value d-inline-flex w-100">
                            @foreach (var spec in groupList)
                            {
                                @if (String.IsNullOrEmpty(spec.ColorSquaresRgb))
                                {
                                    <div class="mb-2 mr-2">
                                        @Html.Raw(spec.ValueRaw)
                                    </div>
                                }
                                else
                                {
                                    <div class="color-squares mb-2 mr-2">
                                        <span class="color-container" title="@Html.Raw(spec.ValueRaw)">
                                            <span class="color" style="background-color: @(spec.ColorSquaresRgb);">&nbsp;</span>
                                        </span>
                                    </div>
                                }
                            }
                        </div>
                    </td>

                </tr>
            }
        </tbody>
    </table>
</div>
